<template>
  <div style="overflow: scroll; text-align: center;">
    <div :style="{display: LoanisActive}" style="position: relative; margin: 80px auto;">
      <span class="loan-title" :style="{display: longLoan}">长期逾期总额</span>
      <span class="loan-title" :style="{display: shortLoan}">短期逾期总额</span>
      <Table stripe border :columns="columns" :data="data" class="loan-table"></Table>
      <Button type="primary" class="btn-detail" @click="detail">进入查看详情</Button>
    </div>
    <div style="height: 450px;" :style="{display: DetailisAcitve}">
      <Table border stripe :columns="columnsDetail" :data="currentData" :row-class-name="rowClassName"></Table>
      <Page show-elevator :total="dataCount" :pageSize="pageSize" :current="pageIndex" @on-change="changepage" @on-page-size-change="pagesize" style="text-align: right;"></Page>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      LoanisActive: 'block',
      DetailisAcitve: 'none',
      longLoan: 'none',
      shortLoan: 'none',
      dataCount: [], // 初始化信息总条数
      pageSize: 6, // 每页条数
      originPage: 1,
      params: {
        type: '',
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      },
      columns: [
        {
          title: '放款金额',
          key: 'loanMoney'
        },
        {
          title: '已还总金额（不含利息）',
          key: 'repayLoanMoney'
        },
        {
          title: '应收总利息',
          key: 'interest'
        },
        {
          title: '已还总利息',
          key: 'repayLoanMoney'
        },
        {
          title: '逾期总金额',
          key: 'overdueMoney'
        },
        {
          title: '逾期总利息',
          key: 'overdueInterest'
        }
      ],
      data: [{}],
      columnsDetail: [
        {
          title: '姓名',
          key: 'userName'
        },
        {
          title: '身份证号码',
          key: 'idNumber',
          width: 150
        },
        {
          title: '贷款编号',
          key: 'loanId'
        },
        {
          title: '放款金额',
          key: 'loanAmount'
        },
        {
          title: '已还总金额（不含利息）',
          key: 'repayAmount'
        },
        {
          title: '应收利息',
          key: 'interest'
        },
        {
          title: '已还利息',
          key: 'repayInterest'
        },
        {
          title: '逾期金额',
          key: 'overdueMoney'
        },
        {
          title: '逾期利息',
          key: 'overdueInterest'
        }
      ],
      currentData: [{}]
    }
  },
  methods: {
    /**
     * 刷新页面请求
    * */
    refresh () {
      this.LoanisActive = 'block'
      this.DetailisAcitve = 'none'
      this.getDataCount(this.params)
    },
    /**
     * @params: type 0 短期 1 长期
     * */
    getDataCount (params) {
      if (params.type === '0') {
        this.shortLoan = 'block'
        this.longLoan = 'none'
      } else {
        this.shortLoan = 'none'
        this.longLoan = 'block'
      }
      // console.log(params.type)
      this.$api.getLoanCount(params).then((res) => {
        if (!res.error) {
          this.data = [res.data] // 获得表格数据
          console.log(res.data)
        } else {
          console.log(this.$Message.error(res.msg))
        }
      })
    },
    /**
     * @params: type 0 短期 1 长期
     * */
    getDataDetail (params) {
      console.log(params.type)
      params.pageNum = this.originPage
      params.pageSize = this.pageSize
      this.$api.getLoanCountList(params).then((res) => {
        if (!res.error) {
          this.currentData = res.data.list // 获得表格数据
          this.dataCount = res.data.recordCount // 获得页数
          console.log(this.currentData)
        } else {
          console.log(this.$Message.error(res.msg))
        }
      })
    },
    detail () {
      this.LoanisActive = 'none'
      this.DetailisAcitve = 'block'
      this.getDataDetail(this.params)
    },
    changepage (index) {
      this.params.pageNum = index
      this.params.pageSize = this.pageSize
      this.$api.getLoanCountList(this.params).then((res) => {
        if (!res.error) {
          console.log('success')
          this.currentData = res.data.list// 获得表格数据
          this.dataCount = res.data.recordCount // 获得总数据条数
          console.log(this.currentData)
        } else {
          console.log('failed')
          console.log(this.$Message.error(res.msg))
        }
      })
    }
  },
  created () {
    if (this.$route.path === '/overdueshort') {
      this.params.type = '0'
    } else {
      this.params.type = '1'
    }
    this.getDataCount(this.params)
  },
  watch: {
    '$route': function (to, from) {
      // 监听路由是否变化
      this.params.type = to.meta.type
      this.LoanisActive = 'block'
      this.DetailisAcitve = 'none'
      // console.log(this.params.type)
      this.refresh()
    }
  },
  mounted () {
    this.refresh()
  }
}
</script>
<style>
  .ivu-table th{
    color: #ebf7ff;
    background-color: #353535;
    }
  .loan-title {
    font-size: 20px;
    color: #000000;
  }
  .loan-table {
    display: block;
    position: relative;
    margin: 30px auto;
  }
  .btn-detail {
    position: relative;
    margin-top: 0;
    background-color: #005FB7!important;
  }
</style>
